"use client";
import { GameListRep, getFreeGamesApi, SearchProps } from "@/api/home";
import Box from "@/components/Box";
import GroupCard from "@/components/Card/GroupCard";
import HeaderBack from "@/components/HeaderBack";
import {
    BalanceContent,
    BonusContent,
    FreeContent,
    ReplayContent,
} from "@/components/ModalPopup/WalletDescribeModal";
import TipsModal, { ModalProps } from "@/components/TipsModal";
import { useWalletStore } from "@/stores/useWalletStore";
import { Pagination, WalletEnum } from "@/types";
import { useSetState } from "ahooks";
import { InfiniteScroll } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, useRef, useState } from "react";

const Header = () => {
    const { wallet } = useWalletStore((state) => ({
        wallet: state.wallet,
    }));

    const t = useTranslations("ProfilePage");

    const tipsRef = useRef<ModalProps>(null);
    const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");

    const modalHandler = (key: keyof typeof WalletEnum) => {
        setTipsStatus(key);
        tipsRef.current?.onOpen();
    };
    return (
        <>
            <HeaderBack showBack={true} title={"Free Games"}>
                <div
                    className={"mr-[0.2083rem] flex items-center justify-end"}
                    onClick={() => modalHandler("Free")}
                >
                    <i className={"iconfont icon-qianbao3 text-[28px]"}></i>
                    <span className={"ml-[10px] text-[22px]"}>{wallet.free_score}</span>
                </div>
            </HeaderBack>

            <TipsModal
                ref={tipsRef}
                title={
                    <div className={"flex items-center"}>
                        <i
                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
                        ></i>
                        {t("modalTitle")}
                    </div>
                }
            >
                {/*现金*/}
                {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
                {/*  彩金*/}
                {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
                {/* 免费币 */}
                {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
                {/*  重玩币 */}
                {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
            </TipsModal>
        </>
    );
};
const GameListFlag: FC = () => {
    const [target, setTarget] = useSetState<{ games: GameListRep[]; page: Partial<Pagination> }>({
        games: [],
        page: { is_end: false },
    });
    const params = useRef<SearchProps>({
        current_page: 0,
        page_size: 15,
        use_page: true,
    });

    const getGames = async (): Promise<GameListRep[] | undefined> => {
        return getFreeGamesApi(params.current).then((res) => {
            if (res.code === 200) {
                setTarget((value) => ({ page: res.page, games: [...value.games, ...res.data] }));
                return res.data;
            }
        });
    };
    const loadMore = async () => {
        params.current.current_page += 1;
        await getGames();
    };
    return (
        <>
            <Header />
            <main className={"main-header bg-[#1f1f1f]"}>
                <Box>
                    <GroupCard data={target.games} row={1} groupType={2} />
                    <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
                </Box>
            </main>
        </>
    );
};

export default GameListFlag;